<template>
	<video src="https://escape-building.oss-cn-chengdu.aliyuncs.com/video/dt-bj.mp4" 
	autoplay 
	class="bg-video" 
	loop 
	object-fit="cover" 
	show-fullscreen-btn="false"></video>
	<view class="content">
		<view class="header-img">
			<view class="lv">{{userInfo.level}}</view>
			<img src="" alt="" />
		</view>
		<!-- 世界聊天框 -->
			<!-- 世界聊天框组件 -->
			<WorldChatBox class="world-msg"></WorldChatBox>
		<!-- 仓库交易行 -->
		<view class="warehouse"></view>
		<!-- 排队匹配 -->
		<view class="matching" v-show="isMatching">
			{{matchTime}}匹配中
		</view>
		
		<!-- 开始游戏 -->
		<view class="start-game" @click="startGame" v-if="!isMatching">
			开始游戏
		</view>
		<view class="start-game" @click="stopGame" v-else>
					行动取消
		</view>
		
		
			<!-- 右上角板块 -->
					  <view class="tools">
						<!-- 金币 占用 2/6 -->
						<view class="tool-item gold">
						  <image src="https://tcwjdl.oss-cn-chengdu.aliyuncs.com/icon1.png" alt="金币"></image>
						  <text>{{ userInfo.gold }}</text>
						</view>
						<!-- 点券 占用 2/6 -->
						<view class="tool-item ticket">
						  <image src="https://tcwjdl.oss-cn-chengdu.aliyuncs.com/icon2.png" alt="点券"></image>
						  <text>{{ userInfo.ticket }}</text>
						</view>
						<!-- 邮箱 占用 1/6 -->
						<view class="tool-item email">
						  <image src="https://tcwjdl.oss-cn-chengdu.aliyuncs.com/icon3.png" alt="邮箱"></image>
						</view>
						<!-- 设置 占用 1/6 -->
						<view class="tool-item setting">
						  <image src="https://tcwjdl.oss-cn-chengdu.aliyuncs.com/icon4.png" alt="设置"></image>
						</view>
					  </view>
	</view>
</template>

<script>
	import audioManager from '@/utils/audioManager.js';
	import WorldChatBox from "@/component/WorldChatBox.vue"
	import { getUserInfo } from '@/api/index';
	export default {
		data() {
			return {
				matchTime:"00:00",
				isMatching:false,
				gameInterval:null,
				userInfo:{}
			}
		},
		components:{
				WorldChatBox
			},
		//页面加载完成出发
		mounted() {
			this.getUserInfoM();
		},
		methods: {
			//获取个人讯息
			getUserInfoM(){
				getUserInfo().then((data)=>{
					console.log("个人信息",data);
					this.userInfo = data.data;
					audioManager.playAudio("zhuti",true);
				})
			},
			
			
			startGame(){
				this.isMatching=true;
				this.startTime();
			},
			stopGame(){
				this.isMatching = false;
				clearInterval(this.gameInterval);
			},
			startTime(){
				/* Minutes and seconds */
				var minutes = 0;
				var seconds = 0;
				this.gameInterval = setInterval(()=>{
					seconds ++;
					if(seconds == 60){
						seconds = 0;
						minutes ++;
					}
					let a,b;
					// 补0
					if(minutes<10){
						a = "0"+minutes;
					}else{
						a = minutes;
					}
					if(seconds<10){
						b = "0"+seconds;
					}else{
						b = seconds;
					}
					this.matchTime = a+":"+b;
				},1000);
			}

			
		}
	}
</script>

<style>
	.bg-video{
		width: 100%;
		height: 100vh;
	}
	.content{
		position: fixed;
		width: 100%;
		height: 100vh;
		z-index: 999;
		left: 0px;
		top: 0px;
	}
	.header-img{
		position: relative;
		width: 50px;
		height: 50px;
		/* background-color: aliceblue; */
		left: 10px;
		top: 10px;
		border: 1px solid #ccc;
	}
	.lv{
		
		width: 100%;
		height: 12px;
		position: absolute;
		bottom: 5px;
		right: 2px;
		text-align: right;
		font-size: 12px;
		color: white;
	}
	
/* 开始游戏 */
.start-game{

	position: absolute;
	width: 150px;
	height: 50px;
	background-color: #00ff7f;
	bottom: 10px;
	right: 5px;
	color: #002210;
	text-align: center;
	line-height: 50px;
	font-weight: bold;
	letter-spacing: 2px;
	border-radius: 2px;
	border:1px solid #ccc;
}
.matching{
	width: 250px;
	height: 25px;
	background-color: rgba(1, 56, 33, 0.4);
	margin: auto;
	margin-top: -30px;
	color: #ccc;
}


/* 右上角 */
.tools{
	width: 260px;
	height: 30px;
	background-color: rgba(1, 56, 33, 0.5);
	position: absolute;
	right: 5px;
	top: 10px;
	display: flex;
}
.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin: 0 5px;
}

.tool-item image {
  width: 20px;
  height: 20px;
}

.tool-item text {
  font-size: 12px;
  color: #fff;
}

.tool-item.gold {
  flex: 2;
}

.tool-item.ticket {
  flex: 2;
}

.tool-item.email {
  flex: 1;
}

.tool-item.setting {
  flex: 1;
}

.world-msg{
	position: absolute;
	top: 45px;
	left: 5px
}


</style>
